<template>
  <div id="app">
    <header>
      <h1>2024待办事项</h1>
      <form id="new-task-form" @submit.prevent="handleAdd">
        <input type="text" v-model="task" id="new-task-input" placeholder="把计划写下来吧?" />
        <input type="submit" id="new-task-submit" value="添加任务" />
      </form>
    </header>
    <main>
      <section class="task-list">
        <h2>任务列表</h2>
        <div id="tasks">
          <template v-for="(item, index) in tasks" :key="index">
            <div class="task">
              <div class="content">
                <input
                  type="text"
                  class="text"
                  v-model="tasks[index]"
                  :disabled="readonly[index]"
                />
              </div>
              <div class="actions">
                <button class="edit" @click="handleEdit(index)">
                  {{ btnName[index] }}
                </button>
                <button class="delete" @click="handleDelete(index)">删除</button>
              </div>
            </div>
          </template>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [],
      task: '',
      btnName: [],
      readonly: [],
    }
  },
  methods: {
    handleAdd() {
      if (this.task.trim()) {
        this.tasks.push(this.task.trim())
        this.task = ''
        this.btnName.push('编辑')
        this.readonly.push(true)
      }
    },
    handleDelete(index) {
      this.tasks.splice(index, 1)
      this.btnName.splice(index, 1)
      this.readonly.splice(index, 1)
    },
    handleEdit(index) {
      const isEditing = this.btnName[index] === '保存'
      this.btnName[index] = isEditing ? '编辑' : '保存'
      this.readonly[index] = !isEditing
    },
  },
}
</script>

<style scoped>
#app {
  font-family: 'Roboto', sans-serif;
  background-color: #f0f8ff; /* 明亮的天蓝色背景 */
  padding: 40px;
  max-width: 500px;
  margin: auto;
  border-radius: 15px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

header {
  text-align: center;
  margin-bottom: 20px;
}

h1 {
  font-size: 2.5em;
  color: #007acc; /* 深蓝色标题 */
}

form {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

input[type='text'] {
  padding: 12px;
  border: 1px solid #007acc; /* 深蓝色边框 */
  border-radius: 25px;
  margin-right: 10px;
  width: 70%;
  transition: border-color 0.3s ease;
}

input[type='text']:focus {
  border-color: #005f99; /* 聚焦时的边框颜色 */
  outline: none;
}

input[type='submit'] {
  padding: 12px;
  background-color: #007acc; /* 深蓝色按钮 */
  border: none;
  color: white;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.3s;
}

input[type='submit']:hover {
  background-color: #005f99; /* 深蓝色悬停背景 */
}

.task-list {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.task {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #dee2e6;
}

.task:last-child {
  border-bottom: none;
}

.actions button {
  padding: 6px 12px;
  margin-left: 10px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition:
    background-color 0.3s,
    transform 0.3s;
}

.edit {
  background-color: #28a745; /* 绿色 */
  color: white;
}

.edit:hover {
  background-color: #218838; /* 深绿色 */
  transform: scale(1.05);
}

.delete {
  background-color: #dc3545; /* 红色 */
  color: white;
}

.delete:hover {
  background-color: #c82333; /* 深红色 */
  transform: scale(1.05);
}

.text {
  width: 70%;
  border: none;
  border-bottom: 2px solid #007acc; /* 深蓝色下边框 */
  padding: 5px;
  font-size: 1em;
  transition: border-color 0.3s;
}

.text:disabled {
  background-color: #f8f9fa; /* 灰白色 */
}

.text:focus {
  border-color: #005f99; /* 聚焦时的下边框颜色 */
  outline: none;
}
</style>
